<template>
  <div>
    <v-header></v-header>
    <div>
      <div class="ris_cont">
        <!--<div class="ris_cont_headNav">字典页面&gt;设备维护</div>-->
        <div class="ris_cont_headHint">设备信息设置<div class="ris_cont_headHint_add" @click="add_equip()">+</div></div>
        <div class="ris_cont_dept">
          <table class="ris_cont_dept_tab">
            <tr>
              <th>编号</th>
              <th>设备名称</th>
              <th>所属科室</th>
              <th>所属类型</th>
              <th>排序号</th>
              <th>报表模板</th>
              <th>是否使用</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            <tr v-for="(b,index) in baseEquips">
              <td>{{b.code}}</td>
              <td>{{b.name}}</td>
              <td>{{b.deptname}}</td>
              <td>{{b.eqptypeanme}}</td>
              <td>{{b.sortnum}}</td>
              <td>{{getrepname(b.reportid)}}</td>
              <td>{{b.isuse | usefilter}}</td>
              <td :title="b.memo">{{b.memo | length6}}</td>
              <td>
                <button class="ris_cont_dept_tab_change button" @click="update_equip(b.id,b.code,b.deptcode,b.isuse,b.name,b.pycode,b.sortnum,b.memo,b.eqptypecode,b.aet,b.modality,b.reportid)">修改</button>
                <button class="ris_cont_dept_tab_delete bg_yellow button"@click="dalete_equip(b.id,b.code)">删除</button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!--新增或修改模态-->
      <div class="ris_dept_modal3" v-show="ks_motai">
        <div>
          <p class="ris_dept_modal_head">设备设置<span class="ris_dept_modal_btn_close" @click="close_motai()">X</span></p>
          <table class="ris_dept_modal_tab3">
            <tr>
              <td>设备名称</td>
              <td><input type="text" v-model="bname" @blur="getpycode()"></td>
            </tr>
            <!--<tr>-->
              <!--<td>适用性别</td>-->
              <!--<td>-->
                <!--<select>-->
                  <!--<option>不限</option>-->
                  <!--<option>男</option>-->
                  <!--<option>女</option>-->
                <!--</select>-->
              <!--</td>-->
            <!--</tr>-->
            <tr>
              <td>所属科室</td>
              <td>
                <select v-model="bdeptcode">
                  <!--<option ></option>-->
                  <option v-for="d in depts" :value="d.code">{{d.name}}</option>
              </select>
              </td>
            </tr>
            <tr>
              <td>所属类型</td>
              <td>
                <select v-model="beqptypecode">
                  <!--<option ></option>-->
                  <option v-for="e in eqptypes" :value="e.code">{{e.name}}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>排序号</td>
              <td><input type="number" v-model="bsortnum" @blur="getsortnum()"></td>
            </tr>
            <tr>
              <td>拼音码</td>
              <td><input type="text" v-model="bpycode"></td>
            </tr>
            <tr>
              <td>Aet</td>
              <td><input type="text" v-model="baet"></td>
            </tr>
            <tr>
              <td>Modality</td>
              <td><input type="text" v-model="bmodality"></td>
            </tr>
            <tr>
              <td>是否使用</td>
              <td>
                <select v-model="bisuse">
                  <option value="1">是</option>
                  <option value="0">否</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>报表模板</td>
              <td>
                <select v-model="reportid">
                  <option ></option>
                  <option v-for="e in reportList" :value="e.id">{{e.name}}</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td >
                <input type="text" v-model="bmemo"/>
              </td>
            </tr>
          </table>
          <div class="ris_dept_modal_btn3">
            <button @click="affirm()">确认</button>
            <button class="ris_dept_modal_btn_close" @click="close_motai()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//  import HeaderComponent from './components/header.vue'
//  import OtherComponent from './components/other.vue'
import Header from '@/components/Header/Header';

export default {
  components: {
    'v-header': Header
  },
  created() {
    this.$http.get(window.localStorage.url + "/BaseEquip/findallBaseEquip") //遍历设备
      .then(function(res1) {
        if(res1.data.status == 'SUCCESS') {
          this.baseEquips = res1.data.data;
        }
      });

    this.$http.get(window.localStorage.url + "/BaseEquip/findReportList")
      .then(function(res1) {
        if(res1.data.status == 'SUCCESS') {
          this.reportList = res1.data.data;
        }
      });


    //查询所属科室  所属类型  isuse
    this.$http.get(window.localStorage.url + "/baseDept/getDepts") //遍历keshi isuse=1   正在使用的科室
      .then(function(res) {
        this.depts = res.data.data;
        this.bdeptcode=res.data.data[0].code;

      });

    this.$http.get(window.localStorage.url + "/baseEqptype/getEqptypes") //遍历设备类型 isuse 1
      .then(function(res) {
        this.eqptypes = res.data.data;
        this.beqptypecode=res.data.data[0].code;
      });
  },

data() {
  return {
   msg: 'hello vue',
    //1添加 2修改
    variable:"",
   ks_motai:false,
  //设备
    baseEquips:"",
    //最大排序号
    bsortnum:"",
  //科室s
    depts:[],
   //类型s
    eqptypes:"",
    //科室 类型  code
    beqptypecode:"",
    //模态属性
    bname:"",
    bdeptcode:"",
    bpycode:"",
    bisuse:1,
    bmemo:"",
    bcode:"",
    bid:"",
    baet:"",
    bmodality:"",

    reportList:[],
    reportid:""

     }
  },
  methods:{

    getrepname(reportid){
      for(var i in this.reportList){
        if(reportid==this.reportList[i].id){
          return this.reportList[i].name;
        }
      }
      return "";
    },

    //公共弹窗
    addModal:function (text,time) {
      $pg.popup({
        text:text,//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        btnToggle:{
          btnDetermine:true,//确定按钮是否显示
          btnCancel:false,//取消按钮是否显示
        },
        timeOut:time,
      });
    },

    //sortnum 为空时默认为0
    getsortnum(){
      if(this.bsortnum==""){
        this.bsortnum=0;
      }
    },


    getpycode() {
      this.$http.get(window.localStorage.url + "/pytool/getPyCode?name=" + this.bname)
        .then(function(res) {
//          console.log(res.data + "拼音码");
          if(res.data.status == 'SUCCESS') {
            this.bpycode = res.data.data;
          }
        });
    },
    add_equip(){

        this.bname="";
        this.bdeptcode=this.depts[0].code;
        this.beqptypecode=this.eqptypes[0].code;
        this.bpycode="";
        this.bisuse=1;
//        this.bsortnum:"",
        this.bmemo="";
        this.baet="";
        this.bmodality="";
        this.reportid="";
      this.variable=1;
      this.ks_motai=true;
      this.$http.get(window.localStorage.url + "/BaseEquip/findmaxnum") //获取最大排序号
        .then(function(res) {
            this.bsortnum = res.data.data;
        });

    },
    update_equip(id,code,deptcode,isuse,name,pycode,sortnum,memo,eqptypecode,aet,modality,reportid){
//      console.log(id,code,deptcode,isuse,name,pycode,sortnum,memo,eqptypecode);
//      console.log(this.baet+"-*-1"+this.bmodality+aet,modality);
      this.variable=2;
      this.ks_motai=true;
      this.bname=name;
      this.bdeptcode=deptcode;
      this.beqptypecode=eqptypecode;
      this.bpycode=pycode;
      this.bisuse=isuse;
      this.bsortnum=sortnum;
      if(aet!=undefined){
        this.baet=aet;
      }else{
        this.baet="";
      }
      if(modality!=undefined){
        this.bmodality= modality;
      }else{
        this.bmodality="";
      }

      if(memo!=undefined){
        this.bmemo=memo;
      }else{
        this.bmemo="";
      }


      if(reportid!=undefined){
        this.reportid=reportid;
      }else{
        this.reportid="";
      }


      this.bid=id;
      this.bcode=code;


//      console.log(this.baet+"-*2-"+this.bmodality);

    },
    dalete_equip(id,code){

      var _this=this;
//      console.log(code);
      $pg.popup({
        text:"确定删除吗？",//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        determine:function() {
          _this.$http.get(window.localStorage.url + "/BaseEquip/deleteBaseEquip?id=" + id + "&code=" + code)
            .then(function (res) {
              if (res.data.status == 'SUCCESS') {

                _this.addModal(res.data.data, 1);//公共弹窗

                _this.$http.get(window.localStorage.url + "/BaseEquip/findallBaseEquip") //遍历设备
                  .then(function (res1) {
                    if (res1.data.status == 'SUCCESS') {
                      this.baseEquips = res1.data.data;
                    }
                  });
              } else {
                _this.addModal(res.data.data, true);//公共弹窗
              }
            });

        }
        });

    },

    affirm(){

      if(!this.bname){
        $pg.popup({
          text: "设备名称不能为空",//显示的文本
          btnClass: 'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor: '#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          }
        });
        return;
      }
//      if(!this.bsortnum){
//
//        $pg.popup({
//          text:"排序号不能为空！",//显示的文本
//          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
//          btnBgColor:'#4f56a3',//按钮的颜色
//          determine:function(){
//
//          },//点击确定执行的方法
//        });
//
//        return;
//
//      }
//      console.log(this.baet+"-*-"+this.bmodality);
      if( this.variable==1) {

      //添加
//        console.log(this.bname,this.bmemo,this.bpycode)
        this.$http.get(window.localStorage.url + "/BaseEquip/addBaseEquip?name="+this.bname+"&deptcode="+this.bdeptcode+"&eqptypecode="+this.beqptypecode+
        "&pycode="+this.bpycode+"&isuse="+this.bisuse+"&sortnum="+this.bsortnum+"&memo="+this.bmemo+"&aet="+this.baet+"&modality="+this.bmodality
        +"&reportid="+this.reportid)
          .then(function(res) {
            if(res.data.status == 'SUCCESS') {
              this.ks_motai=false;

              this.$http.get(window.localStorage.url + "/BaseEquip/findallBaseEquip") //遍历设备
                .then(function(res1) {
                  if(res1.data.status == 'SUCCESS') {
                    this.baseEquips = res1.data.data;
                  }
                });
              this.addModal(res.data.data,1);//公共弹窗
            }else{

              this.addModal(res.data.data,true);//公共弹窗

            }

          });

      }
      if( this.variable==2){
        //修改
        this.$http.get(window.localStorage.url + "/BaseEquip/updateBaseEquip?name="+this.bname+"&deptcode="+this.bdeptcode+"&eqptypecode="+this.beqptypecode+
          "&pycode="+this.bpycode+"&isuse="+this.bisuse+"&sortnum="+this.bsortnum+"&memo="+this.bmemo+"&id="+this.bid+"&code="+this.bcode+"&aet="+this.baet+"&modality="+this.bmodality
          +"&reportid="+this.reportid)
          .then(function(res) {
              if(res.data.status == 'SUCCESS') {
                this.ks_motai = false;
                this.addModal(res.data.data,1);//公共弹窗
                this.$http.get(window.localStorage.url + "/BaseEquip/findallBaseEquip") //遍历设备
                  .then(function(res1) {
                    if(res1.data.status == 'SUCCESS') {
                      this.baseEquips = res1.data.data;
                    }
                  });

              }else{
                this.addModal(res.data.data,true);//公共弹窗
              }

              });
      }


    },

    close_motai(){
      this.ks_motai=false;
    },

  },
  filters:{
    //过滤器
    usefilter(isuse){
      if(isuse==1){
        return "是";
      }else{
        return "否";
      }
    },
    length6(text){
      text=$.trim(text)+"";
      if(text.length>=7){
        text=text.slice(0,6);
        text=text+"...";
        return text;
      }else{
        return text;
      }
    },

  },
//  components: {'other-component': OtherComponent, HeaderComponent,}add_ks()
}
</script>
<style scoped>
  /*body {*/
  /*background-color: #ff0000;*/
/*}*/
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


/*新增按钮*/
.ris_cont_headHint_add{
  width: 70px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  float: right;
  background-color: #666;
  color: #fff;
  cursor: pointer;
}
/*内容区*/
.ris_cont_dept{
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
.ris_cont_dept_tab{
  width: 100%;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}
.ris_cont_dept_tab tr td,.ris_cont_dept_tab tr th{
  border: 1px solid #ddd;
}
.ris_cont_dept_tab tr th{
  background-color: #666;
  color: #fff;
}
.ris_cont_dept_tab tr td:last-child{
  width: 10%;
}
.ris_cont_dept_tab tr td:last-child button{
  width: 35%;
  height: 26px;
  margin: 0 3%;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.ris_cont_dept_tab tr td:last-child button:hover{
  background-color: #1a4161;
}


/*点击删除弹出的模态框*/
.ris_dept_delete{
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(66,66,66,.2);
  display: none;
}
.ris_dept_delete>div{
  position: absolute;
  width: 260px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -130px;
  margin-top: -75px;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #fff;
}
.ris_dept_delete_head{
  height: 30px;
  text-align: right;
  background-color: #999;
  border-radius: 10px 10px 0 0 ;
}
.ris_dept_delete_head span{
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*文字*/
.ris_dept_delete_text{
  line-height: 70px;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
/*按钮*/
.ris_dept_delete_btn{
  text-align: right;
}
.ris_dept_delete_btn button{
  width: 70px;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  height: 30px;
  margin-right: 20px;
}
.ris_dept_delete_btn button:hover{
  background-color: #1a4161;
}

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    /*min-height: 700px;*/
    margin: 50px auto 70px;
  }

/*新增或修改的模态*/
.ris_dept_modal3{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(66,66,66,.2);
  z-index: 2;
}
.ris_dept_modal3>div{
  position: absolute;
  width: 400px;
  height: 460px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -230px;
  border: 1px solid #000;
  background: #f7f7f7;
  border-radius: 10px;
}
/*模态头部*/
.ris_dept_modal_head{
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 1px solid #666;
  background: #999;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  color: #fff;
}
.ris_dept_modal_head span{
  display: inline-block;
  float: right;
  padding: 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*模态里面的内容*/
.ris_dept_modal_tab3{
  width: 85%;
  margin: 0 auto;
  line-height: 33px;
  margin-top: 20px;
}
.ris_dept_modal_tab3 tr td:nth-child(1){width: 20%}
.ris_dept_modal_tab3 tr td:nth-child(2){width: 80%}
.ris_dept_modal_tab3 tr td input,.ris_dept_modal_tab3 tr td select{
  width: 100%;
  height: 28px;
  border: 1px solid #666;
  border-radius: 3px;
  box-sizing: border-box;
}
.ris_dept_modal_tab3 tr td textarea{
  width: 100%;
  height: 60px;
  border: 1px solid #666;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin-top: 6px;
}
.ris_dept_modal_btn3{
  text-align: right;
}
.ris_dept_modal_btn3 button{
  width: 80px;
  height: 36px;
  background-color: #215c84;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 50px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.ris_dept_modal_btn3 button:hover{
  background-color: #1a4161;
}

</style>
